﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example07.aspx.cs" Inherits="Chapter10.Example07" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 10-7 使用 article 元素</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" href="Example01.Favicon.ico" type="image/x-ico" />
    <style>
        h1, h2, h3 {
            background: grey;
            color: white;
        }

        hgroup > h1 {
            margin-bottom: 0px;
        }

        hgroup > h2 {
            background: grey;
            color: white;
            font-size: 1em;
            margin-top: 0px;
        }

        body > header *, body > fotter > * {
            background: transparent;
            color: black;
        }

        article {
            border: thin black solid;
            padding: 10px;
            margin-bottom: 5px;
        }

            article > footer {
                background-color:gray;
                padding: 5px;
                margin: 5px;
                text-align: center;
            }

                article > footer > nav > a {
                    color: white;
                }

        body > article > section, body > article > section > section {
            margin-left: 10px;
        }

        body > header, body > footer {
            border: medium solid black;
            padding-left: 5px;
            margin: 10px 0 10px 0;
        }

        body > nav {
            text-align: center;
            padding: 2px;
            border: dashed thin black;
        }

            body > nav > a {
                padding: 2px;
                color: black;
            }
    </style>
</head>
<body>
    <header>
        <hgroup>
            <h1>Things I like</h1>
            <h2>by Adam Freeman</h2>
        </hgroup>
        <nav>
            <h1>Contents</h1>
            <ul>
                <li><a href="#fruitsilike">Fruits I Like</a></li>
                <li><a href="#morefruit">Additional Fruits</a></li>
            </ul>
        </nav>
    </header>

    <article>
        <header>
            <hgroup>
                <h1>Fruits I like</h1>
                <h2>How I Learned to Love Citrus</h2>
            </hgroup>
        </header>
        I like apples and oranges.
       <section>
           <h1 id="morefruit">Additional fruits</h1>
           I also like bananas, mangosm cherries, apricots, plums, peaches and grapes.
           <section>
               <h1>More information</h1>
               You can see other fruits I like <a href="fruitlist.html">here</a>.
           </section>
       </section>
        <footer>
            <nav>
                More Information:
                <a href="http://fruit.org">Learn More About Fruit</a>
            </nav>
        </footer>
    </article>

    <article>
        <header>
            <hgroup>
                <h1 id="activitiesilike">Activities I like</h1>
                <h2>It hurts, but I keep doing it</h2>
            </hgroup>
        </header>
        <section>
            <p>I like to swim, cycle and run, I am in traning for my first triathlon, but it is hard work.</p>
            <h1 id="tritypes">Kinds of Triathlon</h1>
            There are different kinds of triathlon - sprint, Olympic and so on.
            <section>
                <h1>The kind of triathlon I am aiming for</h1>
                I am aiaming for Olympic, which consists of the following:
                 <ol>
                     <li>1.5km swim</li>
                     <li>40km cycle</li>
                     <li>10km run</li>
                 </ol>
            </section>
        </section>
    </article>

    <footer id="mainFooter">
        &#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
    </footer>
</body>
</html>
